<!--
 * @Author: wrh123 482597539@qq.com
 * @Date: 2024-01-11 12:29:21
 * @LastEditors: wrh123 482597539@qq.com
 * @LastEditTime: 2024-01-11 12:44:26
 * @FilePath: /vue-admin/src/components/paging.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="paging">
    <el-row type="flex" justify="end" align="middle" style="height: 70px;">
      <el-pagination background 
        :page-sizes="[10, 20, 30, 40]" 
        :page-size="pageSize" layout="total, prev, pager, next"
        :total="total" 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :pager-count="pagercount" />
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'VueAdminPaging',
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {

    }
  },

  mounted() {
    console.log(window.innerWidth)
  },

  methods: {
    handleSizeChange(val) {
      this.$emit('size-change', val)
    },
    handleCurrentChange(val) {
      this.$emit('current-change', val)
    }
  },
  computed: {
    pagercount() {
      return window.innerWidth <= 768 ? 3 : 5

    }
  }
}
</script>

<style lang="scss" scoped></style>
